<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    className: {
      type: String,
      default() {
        return 'chart'
      }
    },
    tabName: {
      type: String,
      default() {
        return 'cruxAuditDataTotalVo'
      }
    },
    id: {
      type: String,
      default() {
        return 'chart'
      }
    },
    width: {
      type: String,
      default() {
        return '200px'
      }
    },
    height: {
      type: String,
      default() {
        return '200px'
      }
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    horizontal: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      chart: null,
      chartOption: null
    }
  },
  watch: {
    options: {
      deep: true,
      handler(newVal, oldVal) {
        const xData = newVal.map(item => item.name)
        this.chartOption.xAxis.data = xData
        this.chartOption.series[0].data = newVal
        this.chart.setOption(this.chartOption)
      }
    },
    tabName: {
      handler(newVal, oldVal) {
        this.chart.resize()
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.handleResize);
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const _this = this
      const option = {
        grid: {
          left: '2%',  // 左边距为5%的百分比
          right: '2%', // 右边距为5%的百分比
          containLabel: true // 容纳标签，避免标签被裁剪
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#f2f2f2', // 背景颜色
          textStyle: {
            color: '#333' // 文本颜色
          },
          axisPointer: {
            type: 'shadow',
            label: {
              // show: true,
              // color: '#20a8ac',
              // backgroundColor: 'rgba(0,0,0,0)'
            }
          },
          formatter: function (params) {
            const current = params[0].data
            let result = current.tooltips
            return result;
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            interval: 0 ,
            // rotate: -90,
            formatter: function (value) {
              if (_this.horizontal) {
                return value
              } else {
                let text, length = 4; // 文字显示长度
                if (value.length>length) {
                    text = value.slice(0,length) + '…'
                } else {
                    text = value
                }
                return '{a|' +`${text.split("").join("\n")}` + '}' //垂直显示
              }
            },
            rich:{
              a:{
                height:12,  //设置行高
              }
            }
          }
        },
        yAxis: {
          type: 'value',
          name: "报警数（台）",
        },
        series: [
          {
            data: [],
            type: 'bar',
            itemStyle: {
              normal: {
                // 默认柱状图颜色
                color: '#aaaaaa'
              },
              emphasis: {
                // 鼠标悬浮时的柱状图颜色
                color: '#20a8ac'
              }
            }
          }
        ]
      }
      this.chartOption = option
      // this.chart.setOption(option)
    },
    handleResize() {
      this.chart.resize()
    }
  }
}
</script>
